/**
 * 以省市县级联选择为示例封装的 基于antd 级联选择框 组件( <Cascader></Cascader>) 封装
 * 数据格式需按照 /commonController/getAreaNum 获取省市县接口返回数据格式
 */

import { IAdminAriea } from './type';
import { Cascader, Col, Form } from 'antd';
// import { connect } from 'umi';

import cls from 'classnames';
import arieaStyle from './styles.less';
// import './styles.less';
// import cls from 'classnames';
// import formStyles from '../addEditInfoSty.less'

const Index: React.FC<IAdminAriea> = ({
  colSpan, //所占col
  labelName, //表单 label
  isRequired, //是否必填, 默认否
  allDataID, //数据回显
  areaAll, // // 这个是用户选择数据后，会返回的数据
  showSearch, //是否可搜索
  fieldNames, //自定义 options 中 label value children 的字段
  cascaderData, //级联数据
  formName, //form  表单的 name
  disabled, //是否禁用
  popupClassName, //下拉框样式类名
  allowClear, //是否显示清除  默认为false
  viewId, // 下拉菜单渲染位置,
  onDropdownVisibleChange,
  expandLabelName,
  isDescrip = false,
  placeholder,
}) => {
  // 处理省市县回显
  const analysisArea = () => {
    let selectArea: any = [];
    if (allDataID && allDataID?.length > 0) {
      allDataID?.forEach((item: string) => {
        if (item) {
          selectArea.push(item);
        }
      });
    }
    return selectArea;
  };

  // 选择改变调用,以保存数据
  const onChangeCascader = (value: any, selectedOptions: any) => {
    if (areaAll) {
      areaAll(selectedOptions);
    }
  };

  return (
    <>
      {isDescrip ? (
        <Form.Item
          name={formName ? formName : 'note'}
          label={labelName ? labelName : ''}
          rules={[
            {
              required: isRequired ? true : false,
              message: `请选择${labelName ? labelName : expandLabelName ? expandLabelName : ''}`,
            },
          ]}
          initialValue={analysisArea()}
        >
          {/* 空span标签不要去掉 */}
          {/* <span></span> */}
          <Cascader
            fieldNames={fieldNames ? fieldNames : { label: 'text', value: 'id' }}
            // loading={loadingData}
            onChange={onChangeCascader}
            placeholder={placeholder ? placeholder : `请选择${labelName ? labelName : expandLabelName ? expandLabelName : ''}`}
            changeOnSelect={true}
            allowClear={allowClear ? allowClear : false}
            options={cascaderData}
            popupClassName={cls(arieaStyle['arieaStyle'], popupClassName ? popupClassName : '')}
            expandTrigger="hover"
            showSearch={showSearch ? showSearch : false}
            getPopupContainer={() => (viewId ? (document.getElementById(viewId) as any) : document.body)}
            loading={cascaderData && cascaderData?.length > 0 ? false : true}
            disabled={disabled ? disabled : false}
            onDropdownVisibleChange={onDropdownVisibleChange}
            // open
          />
        </Form.Item>
      ) : (
        <Col span={colSpan ? colSpan : 24}>
          <Form.Item
            name={formName ? formName : 'note'}
            label={labelName ? labelName : ''}
            rules={[
              {
                required: isRequired ? true : false,
                message: `请选择${labelName ? labelName : expandLabelName ? expandLabelName : ''}`,
              },
            ]}
            initialValue={analysisArea()}
          >
            {/* 空span标签不要去掉 */}
            {/* <span></span> */}
            <Cascader
              fieldNames={fieldNames ? fieldNames : { label: 'text', value: 'id' }}
              // loading={loadingData}
              onChange={onChangeCascader}
              placeholder={placeholder ? placeholder : `请选择${labelName ? labelName : expandLabelName ? expandLabelName : ''}`}
              changeOnSelect={true}
              allowClear={allowClear ? allowClear : false}
              options={cascaderData}
              popupClassName={cls(arieaStyle['arieaStyle'], popupClassName ? popupClassName : '')}
              expandTrigger="hover"
              showSearch={showSearch ? showSearch : false}
              getPopupContainer={() => (viewId ? (document.getElementById(viewId) as any) : document.body)}
              loading={cascaderData && cascaderData?.length > 0 ? false : true}
              disabled={disabled ? disabled : false}
              onDropdownVisibleChange={onDropdownVisibleChange}
              // open
            />
          </Form.Item>
        </Col>
      )}
    </>
  );
};
// export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
//   permissions: baseLogin?.permissions,
//   navTab,
// }))(Index);
export default Index;
